<template>
  <el-main>
    <div>
      <div class="brother-1">
        <div style="display: flex">
          <div>
            <el-avatar class="headImg" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
          </div>
          <div class="userInfo">
            <h3 style="text-align: left;margin-top: 30px">用户名:{{admin}}</h3>
          </div></div>
        <div class="mineInfo">
          <div class="infoText">年龄：21</div>
          <div class="infoText">工资：Error</div>
          <div class="infoText">婚姻：未婚单身</div>
          <div class="infoText">理想：脱离工作的苦海</div>
        </div>
      </div>
    </div>
  </el-main>

</template>

<script>
export default {
  name: "Mine",
  data(){
    return{
      admin: '无',
      pass: '',
    }
  },
  mounted() {
    this.admin = localStorage.getItem("admin");
    this.pass = localStorage.getItem("pass");
  }
}
</script>

<style scoped>
.brother-1{
  background-color: #42b983;
  border-radius: 5px;
  box-shadow: 2px 2px 10px 2px gray;
  width: 50%;
  height: 400px;
  margin-top: 30px;
  line-height: normal;
}
.headImg{
  width: 100px;
  height: 100px;
  margin-left: 50px;
  margin-top: 50px;
}
.userInfo{
  width: 300px;
  height: 100px;
  margin-left: 20px;
  margin-top: 50px;
  color: white;
}
.mineInfo{
  width: 100%;
  height: 200px;
  background-color: orange;
  margin-left: 50px;
  margin-top: 20px;
  border-radius: 10px;
  box-shadow: 2px 2px 10px 2px gray;
}
.infoText{
  position: absolute;
  text-align: left;
  margin-top: 20px;
  margin-left: 30px;
}
.infoText:nth-child(2){
  margin-top: 60px;
}
.infoText:nth-child(3){
  margin-top: 100px;
}
.infoText:nth-child(4){
  margin-top: 140px;
}
</style>
